---
id: 646c5ace05e4be4211407935
title: Step 8
challengeType: 0
dashedName: step-8
---

# --description--

Per vedere l'elemento `cat-head`, imposta un gradiente lineare come sfondo con `#5e5e5e` all'`85%` e `#45454f` al `100%`.

Potresti non notare la differenza tra i due colori, ma sono lì.

# --hints--

Il selettore `.cat-head` dovrebbe avere una proprietà `background`.

```js
assert.match(code, /background:/)
```

La proprietà `background` dovrebbe usare la funzione `linear-gradient`.

```js
assert.match(code, /background:\s*linear-gradient\(/)
```

La funzione `linear-gradient` dovrebbe impostare il primo colore `#5e5e5e` all'`85%`.

```js
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
assert.equal(firstGradient,'(94,94,94)85%,');
```

La funzione `linear-gradient` dovrebbe impostare il secondo colore `#45454f` al `100%`.

```js
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
assert.equal(secondGradient,'(69,69,79)100%)');
```


# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
    </main>
</body>
</html>
```

```css
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

--fcc-editable-region--
.cat-head {
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;

}
--fcc-editable-region--
```
